<template>
  <div>
    <!-- 文件上传 -->
    <div class="text-center">
      <el-upload
        ref="upload"
        :file-list="fileList"
        class="upload-demo"
        drag
        action
        multiple
        :auto-upload="false"
        :accept="fileType.accept"
        style="margin: 0 auto; width: 100%; text-align: center; padding: 10px 0"
        :limit="1"
        :on-change="handleFileChange"
        :on-remove="handleFileRemove"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text" v-html="$t('flyparam.upload_file_tip1')">
          Drag files here, or
          <em>Click to upload</em>
        </div>
        <div
          class="el-upload__text"
          v-html="$t('flyparam.upload_file_tip2', { type: fileType.name })"
        >
          <p>Can only upload {{ fileType.name }} files</p>
        </div>
      </el-upload>
      <el-button
        v-if="this.type === 'Terminal' || this.type === 'Reference'"
        type="text"
        @click="download"
      >
        <i class="el-icon-download" />
        <span class="underline">{{
          $t('flyparam.download_excel_templte')
        }}</span>
      </el-button>
    </div>
    <div v-if="dataMode === 1 || dataMode === 2" class="handle-method">
      <span class="handle-desc">{{ $t('flyparam.duplicate_table_tip') }}</span>
      <el-radio-group v-model="duplicateTableMethod">
        <el-radio :label="1">
          {{ $t('flyparam.data_handle_option1') }}
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
            :open-delay="300"
          >
            <template #content>
              <div v-html="$t('flyparam.table_handle_option1_tip')"
            /></template>
            <button class="hint-button">
              <span role="img" class="hint-svg">
                <svg-icon icon-class="question2" />
              </span>
            </button>
          </el-tooltip>
        </el-radio>
        <el-radio :label="2">
          {{ $t('flyparam.data_handle_option2') }}
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
            :open-delay="300"
          >
            <template #content>
              <div v-html="$t('flyparam.table_handle_option2_tip')"
            /></template>
            <button class="hint-button">
              <span role="img" class="hint-svg">
                <svg-icon icon-class="question2" />
              </span>
            </button>
          </el-tooltip>
        </el-radio>
      </el-radio-group>
    </div>
    <div v-if="dataMode === 1 || dataMode === 3" class="handle-method">
      <span class="handle-desc">{{ $t('flyparam.duplicate_data_tip') }}</span>
      <el-radio-group v-model="duplicateHandleMethod">
        <el-radio :label="1">
          {{ $t('flyparam.data_handle_option1') }}
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
            :open-delay="300"
          >
            <template #content>
              <div
                v-html="
                  type === 'Terminal'
                    ? $t('flyparam.terminal_handle_option1_tip')
                    : $t('flyparam.data_handle_option1_tip')
                "
            /></template>
            <button class="hint-button">
              <span role="img" class="hint-svg">
                <svg-icon icon-class="question2" />
              </span>
            </button>
          </el-tooltip>
        </el-radio>
        <el-radio :label="2">
          {{ $t('flyparam.data_handle_option2') }}
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
            :open-delay="300"
          >
            <template #content>
              <div
                v-html="
                  type === 'Terminal'
                    ? $t('flyparam.terminal_handle_option2_tip')
                    : $t('flyparam.data_handle_option2_tip')
                "
            /></template>
            <button class="hint-button">
              <span role="img" class="hint-svg">
                <svg-icon icon-class="question2" />
              </span>
            </button>
          </el-tooltip>
        </el-radio>
        <el-radio :label="3">
          {{ $t('flyparam.data_handle_option3') }}
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
            :open-delay="300"
          >
            <template #content>
              <div
                v-html="
                  type === 'Terminal'
                    ? $t('flyparam.terminal_handle_option3_tip')
                    : $t('flyparam.data_handle_option3_tip')
                "
              />
            </template>
            <button class="hint-button">
              <span role="img" class="hint-svg">
                <svg-icon icon-class="question2" />
              </span>
            </button>
          </el-tooltip>
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
import {
  importParamterTemplateStructure,
  importParamterTemplateDataAndStructure,
  importParamterTemplateData,
  importTerminalTableData,
  importRefTableData,
  downloadExcelImportTemplate,
  downloadTerminalExcelImportTemplate
} from '@/api/parameter'
import common from '@/utils/common'
import { PERMISSIONS } from '@/components/common/const'

export default {
  props: {
    type: {
      type: String
    },
    tableId: {
      type: String
    },
    formData: {
      type: FormData
    },
    tableType: {
      type: Number
    },
    templateId: String,
    dataMode: Number,
    sn: String
  },
  data() {
    return {
      PERMISSIONS: { ...Object.freeze(PERMISSIONS.FLY_PARAM) },
      duplicateHandleMethod: 1,
      duplicateTableMethod: 1,
      fileList: []
    }
  },
  computed: {
    fileType() {
      if (this.type === 'Terminal' || this.type === 'Reference') {
        return { name: 'Excel', accept: '.xls, .xlsx' }
      } else {
        return { name: 'ZIP', accept: '.rar, .zip' }
      }
    }
  },
  methods: {
    handleFileChange(file, fileList) {
      this.$emit('upload', file)
      // 通知父组件更改disabled状态
      this.$emit('fileChange', false)
    },
    handleFileRemove(file, fileList) {
      this.$emit('remove', null)
      // 通知父组件更改disabled状态
      this.$emit('fileChange', true)
    },
    close() {
      this.$refs.upload.clearFiles()
      Object.assign(this.$data, this.$options.data())
    },
    download() {
      let request
      let fileName
      if (this.tableType === 1) {
        request = downloadTerminalExcelImportTemplate
        fileName = 'Terminal'
      } else {
        request = downloadExcelImportTemplate
        fileName = this.sn
      }
      const loading = this.$loading({
        lock: true,
        text: this.$t('flyparam.please_wait'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      request(this.templateId, this.tableId)
        .then((res) => {
          loading.close()
          // createLink(res.url)
          common.downloadFile(
            res,
            this.$store.state.parameter.appName +
              '-' +
              fileName +
              '-import-template',
            '.xlsx'
          )
        })
        .catch(() => {
          loading.close()
        })
    },
    confirm(mode) {
      this.$emit('requesting')
      const cb = (res) => {
        this.$message.success(this.$t('flyparam.import_success_message'))
        this.$emit('requested')
      }

      const err = (e) => {
        this.$message.error(e.message)
        this.$emit('error')
      }

      if (this.type === 'Terminal') {
        importTerminalTableData(
          this.templateId,
          this.tableId,
          this.formData,
          this.duplicateHandleMethod
        )
          .then((res) => {
            cb()
            this.$bus.emit('freshTerminalCount')
            if (res.dealMethod == 'async') {
              this.$message.success(this.$t('common.import_processing'))
              this.$store.dispatch('app/fetchTaskData')
            }
          })
          .catch(err)
      } else if (this.type === 'Reference') {
        importRefTableData(
          this.templateId,
          this.tableId,
          this.formData,
          this.duplicateHandleMethod
        )
          .then((res) => {
            cb()
            if (res.dealMethod == 'async') {
              this.$message.success(this.$t('common.import_processing'))
              this.$store.dispatch('app/fetchTaskData')
            }
          })
          .catch(err)
      } else {
        switch (mode) {
          case 1:
            importParamterTemplateDataAndStructure(
              this.templateId,
              this.formData,
              this.duplicateHandleMethod,
              this.duplicateTableMethod
            )
              .then(cb)
              .catch(err)
            break
          case 2:
            importParamterTemplateStructure(
              this.templateId,
              this.formData,
              this.duplicateTableMethod
            )
              .then(cb)
              .catch(err)
            break
          case 3:
            importParamterTemplateData(
              this.templateId,
              this.formData,
              this.duplicateHandleMethod
            )
              .then(cb)
              .catch(err)
            break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@include hintButton;

.handle-method {
  margin: 15px;
  .handle-desc {
    margin: 0px 50px;
    display: inline-block;
    width: 230px;
  }
}

::v-deep .el-upload {
  display: block;
}

::v-deep .el-upload-list--text {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

::v-deep .el-upload-dragger {
  width: 80%;
  margin: 0 auto;
}
</style>
